<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { Icon as TIcon } from 'tdesign-icons-vue-next';

const route = useRoute();
const showTabBar = ref(true);

// 监听路由变化，根据meta.showTabBar控制导航栏显示
watch(() => route.meta, (meta) => {
  showTabBar.value = meta.showTabBar !== false;
}, { immediate: true });

// 底部导航栏配置
const activeTab = ref('home');
const TAB_BAR_HEIGHT = 56;

const tabList = [
  { 
    value: 'home', 
    label: '首页', 
    icon: 'home', 
    badgeProps: { count: 16 }, 
    ariaLabel: '首页，有16条消息' 
  },
  { 
    value: 'app', 
    label: '板块', 
    icon: 'app', 
    badgeProps: { dot: true }, 
    ariaLabel: '应用，有新的消息' 
  },
  { 
    value: 'post', 
    label: '发布', 
    icon: 'edit', 
    ariaLabel: '发布内容' 
  },
  { 
    value: 'chat', 
    label: '消息', 
    icon: 'chat', 
    badgeProps: { count: 'New' }, 
    ariaLabel: '聊天，New' 
  },
  { 
    value: 'user', 
    label: '我的', 
    icon: 'user', 
    badgeProps: { count: '···' }, 
    ariaLabel: '我的，有很多消息' 
  },
];
</script>

<template>
  <!-- 主容器 -->
  <div class="app-container">
    <!-- 页面内容 -->
    <main class="main-content" :class="{ 'no-tab-bar': !showTabBar }">
      <router-view />
    </main>
    
    <!-- 底部导航栏 -->
    <t-tab-bar 
      v-show="showTabBar"
      v-model="activeTab" 
      :split="false"
      class="bottom-tab-bar"
    >
      <t-tab-bar-item 
        v-for="tab in tabList" 
        :key="tab.value" 
        :value="tab.value"
        :badge-props="tab.badgeProps"
        :aria-label="tab.ariaLabel"
        :class="{ 'post-button': tab.value === 'post' }"
      >
        {{ tab.label }}
        <template #icon>
          <t-icon :name="tab.icon" />
        </template>
      </t-tab-bar-item>
    </t-tab-bar>
  </div>
</template>

<style scoped>
.app-container {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
}

.main-content {
  padding-bottom: v-bind('TAB_BAR_HEIGHT + "px"');
}

.main-content.no-tab-bar {
  padding-bottom: 0;
}

.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  height: v-bind('TAB_BAR_HEIGHT + "px"');
  z-index: 100;
}

/* 发布按钮特殊样式 */
.post-button .t-icon {
  background-color: var(--td-brand-color);
  color: white;
  padding: 8px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin-top: -20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.post-button .t-tab-bar-item__text {
  margin-top: 8px;
}

.post-button {
  position: relative;
  z-index: 1;
}
</style>